<template>
	<view class="container">
		<view class="list" style="margin-top: 30upx;">
			<view class="list-item">
				<view class="name f30 c333">姓名</view>
				<view class="input-box"><input type="text" placeholder="请输入员工姓名" v-model="name" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">手机号</view>
				<view class="input-box"><input type="number" placeholder="请输入登录手机号" v-model="telephone" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">密码</view>
				<view class="input-box"><input type="password" placeholder="请输入6-20密码" v-model="password" /></view>
			</view>
		</view>

		<view class="rolesBox mt20" @tap="$open('./roles')">
			<view class="name f30 c333">
				所属角色
			</view>
			<view class="arrow">
				<view class="f30 c333" v-for="(val,index) in roles" :key='index'>{{val.name}} <block v-if="index<roles.length-1">/</block></view>
				<image src="../../../static/images/arrow_right.png" mode="aspectFit"></image></view>
		</view>
		<view class="list">
			<view class="list-item">
				<view class="name f30 c333">微信</view>
				<view class="input-box"><input type="text" placeholder="请输入微信号码" v-model="wechat" /></view>
			</view>
			<view class="list-item">
				<view class="name f30 c333">QQ</view>
				<view class="input-box"><input type="text" placeholder="请输入QQ号码" v-model="qq" /></view>
			</view>
		</view>
		<view class="btn" @tap="goAdd"><text class="f36 cfff">确认</text></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			telephone: '',
			password: '',
			wechat: '',
			qq: '',
			roles: []
		};
	},
	onShow() {
		this.roles=uni.getStorageSync('list')
	},
	onLoad() {
	
	},
	created() {},
	methods: {
		//增加员工信息
		goAdd() {
		let that=this
			if(that.name==''){
				that.$sToast('员工姓名不能为空');
			}
			if (!/^1[3456789]\d{9}$/.test(that.telephone)) {
				that.$sToast('手机号格式错误');
				return;
			}
			if (that.password == '') {
				that.$sToast('密码不能为空');
				return;
			}
			if(that.roles==''){
				that.$sToast('所属角色不能为空');
			}
			if(that.wechat==''){
				that.$sToast('微信号码不能为空');
			}
			if(that.qq==''){
				that.$sToast('QQ不能为空');
			}
			console.log(this.roles);
			let c=[]
			this.roles.forEach(item=>{
				c.push(item.lit)
			})
			console.log(c);
				
			that.$ajax('api/v1.user/add',
				{
					name: that.name,
					telephone: that.telephone,
					auth_group_ids: JSON.stringify(c),
					password: that.password,
					wechat: that.wechat,
					qq: that.qq
				}).then(res => {
					uni.removeStorage({
						key:'list'
					})
					if(res.code==1){
						that.$sToast('添加成功')
						setTimeout(function(){
							uni.navigateTo({
								url:'./list'
							},1500)
						})
					}else{
						that.$sToast(res.message)
					}
				})
				.catch(res => {
					console.log(error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.list {
	margin-top: 20upx;
	.list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: $white-background;
		border-bottom: 2upx #eee solid;
		padding: 30upx;
		position: relative;
		&:last-child {
			border-bottom: none;
		}
		.name {
			position: absolute;
			left: 30upx;
			top: 30upx;
		}
		.input-box {
			width: 100%;
			padding-left: 140upx;
			input {
				width: 100%;
				font-size: 30upx;
				color: #666;
				text-align: right;
			}
		}
	}
}
.rolesBox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: $white-background;
	padding: 35upx 30upx;
	.arrow {
		display: flex;
		flex-direction: row;
		image {
			width: 20upx;
			height: 35upx;
			margin:4upx 0 0 18upx;
		}
	}
}
.btn {
	width: 700upx;
	margin: auto;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	background-color: #249af6;
	margin-top: 130upx;
}
</style>
